<template>
  <div class="my_container margin_auto">
    <!-- 头部 用户个人信息 -->
    <div class="my_header">
      <div class="userinfo">
        <div>
          <img src="@/assets/images/avc.png" alt="" />
        </div>
        <p>Elves</p>
      </div>
    </div>

    <div class="baseinfo">
      <router-link to="/coins">
        <div class="md">
          <svg-icon iconClass="bookcoins"></svg-icon>
          <div class="pad">
            <p>COINS</p>
            <!-- <p>balance:2000</p> -->
          </div>
        </div>
      </router-link>
      <router-link to="/store">
        <div class="md">
          <svg-icon iconClass="chongzhi"></svg-icon>

          <div class="pad">
            <p>Store</p>
            <!-- <p>Get icon</p> -->
          </div>
        </div></router-link
      >
    </div>
    <!-- <div class="line"></div> -->
    <ul class="tag">
      <tag
        :item="item"
        @click="$router.push(item.path)"
        v-for="(item, i) in tagArr"
        :key="i"
      ></tag>
    </ul>
    <!-- <div class="line"></div> -->
    <van-button class="btn" @click="outLogin" color="#ffffff" block
      ><span style="color: #ed424b">logOut</span></van-button
    >
    <div class="bottomyou">
      <p>THANK YOU!</p>
      <p>
        Show your support to inspire the writer to come up with more fantastic
        stories
      </p>
    </div>
  </div>
</template>

<script>
import tag from '@com/com/tag.vue';
import topBar from '@com/com/topBar.vue';

export default {
  data() {
    return {
      userinfo: {
        username: 'yyds',
        avatar: '',
        signature: 1,
      },
      levelNum: 0,
      ticketArr: [
        //  {text:'月票',num:0},
        //  {text:'推荐票',num:0},
        //  {text:'起点币',num:100},
      ],
      tagArr: [
        {
          text: 'history',
          icon: 'iconfont icon-liulanjilu',
          color: '#79b7ff',
          path: '/bookshelf/history',
        },
        {
          text: 'my books',
          icon: 'iconfont icon-wodeshujia',
          color: '#eb414a',
          path: '/bookshelf/my',
        },
        //  {text:'关注/收藏',icon:'iconfont icon-shoucang',color:'#ffcd4c'},
        //  {text:'会员等级',icon:'iconfont icon-zhibohuiyuan',color:'#ffde52',info:1+'级'},
        //  {text:'编辑资料',icon:'iconfont icon-bangzhu',color:'#78b7ff',path:'/edit'},
        //  {text:'安全中心',icon:'iconfont icon-anquanyinsi',color:'#ff9659'},
        //  {text:'帮助中心',icon:'iconfont icon-bangzhu',color:'#78b7ff'},
      ],
      levelArr: [
        { level: '高级VIP', icon: 'iconfont icon-level1', color: '#b550ff' },
        //  {level:'初级VIP',icon:'iconfont icon-vip1',color:'#a229de'},
        //  {level:'高级会员',icon:'iconfont icon-icon_Grade',color:'#ff6c74'},
        //  {level:'普通会员',icon:'iconfont icon-tubiaozhizuomoban_yuefenhejigoudengji',color:'#7ab9ff'},
        //     {level:'普通用户',icon:'iconfont icon-dengji',color:'#73db00'},
      ],
    };
  },
  created() {
    this.userinfo = JSON.parse(localStorage.getItem('userinfo'));
  },
  computed: {
    level() {
      return this.levelArr[this.levelNum];
    },
  },
  methods: {
    outLogin() {
      //             Dialog.confirm({
      //    title: '退出',
      //    message: '确认退出登录吗?',
      //    confirmButtonColor: "#ed424b",
      //  })
      //    .then(() => {
      //     Toast('退出成功')
      //    })
    },
  },
  component: {
    tag,
    topBar,
  },
};
</script>

<style lang="scss" scoped>
.svg-icon {
  font-size: 0.9rem;
}
.my_container {
  width: 100vw;
  min-height: 92vh;
  background: #f4f5f7;
  font-size: 0.43rem;
  padding: 0 1rem;
  box-sizing: border-box;

  .line {
    height: 0.5rem;
    background-color: #f6f7f9;
  }

  .my_header {
    padding-top: 2rem;
    //  background: url('../../assets/images/userback.jpg')no-repeat;
    // background-color: #ffff;

    .userinfo {
      // color: #ffffff;
      text-align: center;

      img {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
      }

      p {
        margin: 5px 0;
        //  &:nth-child(3){
        //     font-size: 0.25rem;
        //     color: #88ff00;
        //  }
      }
    }
  }

  .bottomyou {
    margin-top: 3rem;
    text-align: center;
    color: #ccc;
  }

  .baseinfo {
    margin: 1.5rem auto;

    height: 2rem;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;

    .md {
      height: 3rem;
      background-color: #ffffff;
      border-radius: 0.5rem;
      display: flex;
      padding: 0.5rem 0.5rem;
      box-sizing: border-box;
      align-items: center;

      .pad {
        margin-left: 0.5rem;

        p:nth-child(1) {
          font-size: 0.8rem;
          font-weight: 600;
        }

        p:nth-child(2) {
          margin-top: 0.3rem;
          font-size: 0.5rem;
          color: #ccc;
        }
      }
    }
  }

  .module {
    color: #6d6d6d;
    display: flex;
    text-align: center;
    align-items: center;
    padding: 20px 0;

    div {
      flex: 1;

      &:last-child {
        color: #d51520;
      }
    }
  }

  .btn {
    border-radius: 0.5rem;
  }

  .tag {
    width: 100%;
    // color: #b550ff;

    background-color: #ffffff;

    border-radius: 0.5rem;

    li {
      margin: 0.5rem 0;

      padding-left: 20px;
    }
  }
}
</style>
